<template id="infoList">
    <div>
        <div class="infoList">
            <ul
            v-infinite-scroll="moreList"
            infinite-scroll-disabled="loading"
            infinite-scroll-immediate-check = "true"
            infinite-scroll-distance="100">
                <li v-for="item in systemList" class="white_bg">

                    <div class="info_icon coupons_info">
                        <i class="icon iconfont icon-xitongxiaoxi-"></i>
                    </div>
                    <div class="info_list_con">
                        <div class="info_list_tit">
                            <span>{{item.crtTime | endtimeStamp}}</span>
                            {{item.msgTitle}}
                        </div>
                        <div class="info_list_text">
                            {{item.msgContent}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <go-top v-show="goTopState" ref="goTopId"></go-top>
        <div class="loading-box" v-if="moreInfo">
            <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreCoupon"></list-loading>
        </div>
        <div class="lastInfoMore" v-if="!moreInfo" v-show="systemList.length>systemPageLimit">没有更多</div>
    </div>
</template>
<script>
    import * as types from '../../vuex/types.js'
    import getData from '../../service/getData.js'
    import getData1 from '../../service/getData2.js'
    import listLoading from '../../componentes/global/listLoading.vue'
    import { mapState,mapGetters } from 'vuex'
    export default {
        data(){
            return{
                loading:true,
                noMoreCoupon:true,
                goTopState:false,
                moreInfo:true
            }
        },
        created:function(){
            // 监视滚动
            window.addEventListener('scroll', this.handleScroll);
            this.$store.commit(types.SYSTEM_INFO);
            this.$store.commit(types.SYSTEM_PAGE,1);
            this.$store.commit(types.GET_SCORLL_STATUS,true);
            this.clickMoreList();
        },
        components: {
            listLoading
        },
        beforeRouteLeave(to, from, next){
            if (this.$refs.goTopId) {
                this.$refs.goTopId.clear();
            }
            window.removeEventListener('scroll', this.handleScroll);
            next()
        },
        computed:{
            ...mapState({
                systemList:state => state.info.systemList,
                    systemPageLimit:state => state.info.systemPageLimit,
            }),
            ...mapGetters(['userInfo']),
            routeInfo:function(){
                return this.$route.params.type
            }
        },
        methods:{
            clickMoreList:function(){
                if(!this.noMoreCoupon){//防止重复点击
                    return
                }

                let me = this;
                this.noMoreCoupon = false;
                this.$store.dispatch("systemList",{'method':'post',data:{usrId:me.userInfo.usrId}}).then(rep => {
                    if(rep.content.list){
                        if(rep.content.list.length < me.systemPageLimit){
                            setTimeout(function(){me.noMoreCoupon = true;},300);
                            me.moreInfo=false
                        }
                        if(rep.content.list.length == me.systemPageLimit){//如果列表数据够10条，开启下拉加载
                            me.moreInfo=true;
                            me.loading = false;
                            me.noMoreCoupon = true;
                        }
                    }else{
                        setTimeout(function(){me.noMoreCoupon = true;},300);
                    }
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreCoupon = true;},300);
                });
            },
            moreList:function(){
                this.loading = true;
                this.noMoreCoupon = true;
                this.clickMoreList();
            },
            //监听滚动事件
            handleScroll() {
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollHeight=document.documentElement.clientHeight||document.body.scrollTop;
                console.log(scrollHeight)
                if (scrollTop>=scrollHeight+50) {
                    this.goTopState = true
                } else {
                    this.goTopState = false
                }
                //回到顶部过程中用户滚动滚动条，停止定时器
                if (scrollTop <= 0) {
                    if (this.$refs.goTopId) {
                        this.$refs.goTopId.clear();
                    }
                };

            },
        }
    }
</script>
<style>
    .infoList {
        margin-top: 1rem;
    }

    .infoList li {
        min-height: 5rem;
        border-bottom: 1px solid #f0f0f0;
        /*background: #fff;*/
        position: relative;
        padding-bottom: .4rem;
    }
    .infoList li a{color:#333;}
    .coupons_info{background: -webkit-linear-gradient(35deg, #4ea0ec, #14c1fa);}
    .order_info{background: -webkit-linear-gradient(35deg, #e5ab1c, #f1bf2a);}
    .comment_info{background: -webkit-linear-gradient(35deg, #ff6d31, #fe8439);}
    .overdue_info{background: -webkit-linear-gradient(35deg, #ed5355, #fd6f54);}
    .friend_info{background: -webkit-linear-gradient(35deg, #78b93b, #a1dd49);}
    .sys_info{background: -webkit-linear-gradient(35deg, #6886f8, #658eff);}
    .info_icon {
        height: 3rem;
        width: 3rem;
        line-height: 3rem;
        text-align: center;
        float: left;
        border-radius: .2rem;
        margin: 1rem 0 0 1rem;
        position: relative;
        z-index: 2;
    }

    .info_tag {
        border-top: 1rem solid #ff3c66;
        border-left: 1rem solid #ff3c66;
        border-right: 1rem solid transparent;
        border-bottom: 1rem solid transparent;
        position: absolute;
        top: -.2rem;
        left: -.2rem;
        border-top-left-radius: .2rem;
        z-index: 3;
        filter: drop-shadow(.2rem .2rem .2rem rgba(0,0,0,.3))
    }

    .info_tag:before {
        content: "";
        right: -1.2rem;
        top: -1rem;
        border-bottom: .2rem solid #82051f;
        border-left: .2rem solid transparent;
        border-right: .2rem solid transparent;
        position: absolute;
    }

    .info_tag:after {
        content: "";
        left: -1.2rem;
        bottom: -1.2rem;
        border-bottom: .2rem solid transparent;
        border-left: .2rem solid transparent;
        border-top: .2rem solid transparent;
        border-right: .2rem solid #82051f;
        position: absolute;
    }

    .info_tag span {
        position: absolute;
        left: -1.4rem;
        top: -.9rem;
        font-size: .8rem;
        color: #fff;
        width: 2rem;
        text-align: center;
        display: block;
        font-family: Arial;
        z-index: 31;
        line-height: normal;
    }
    .info_icon .icon{font-size:1.8rem;color:#fff;}
    .info_list_con{overflow: hidden;padding: 0 .667rem;}
    .info_list_tit{font-size:1rem;margin-top: 1rem;}
    .info_list_tit span{float: right;font-size:1rem;color:#999;font-family: Arial;}
    .info_list_text{font-size:1rem;color:#999;line-height: 1.6rem;margin-top: .2rem;}
    .info_mar_bot{padding-bottom: 2rem;}
</style>